<template>
  <div class="table-wrapper">
    <el-table :data="data">
      <el-table-column
          v-for="({ prop, label, sortable, width, labelStyle, tooltip, style, formatter }) in columns"
          :key="prop"
          :prop="prop"
          :label="label"
          :sortable="sortable ? 'custom' : false"
          :width="width"
      >
        <template #header>
          <slot :name="prop + 'Header'">
            <div class="inline-flex" :style="labelStyle">
              <span>{{label}}</span>
              <el-tooltip
                  popper-class="table-tooltip"
                  effect="dark"
                  placement="top-start"
                  :content="tooltip"
                  v-if="tooltip"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </slot>
        </template>
        <template #default="scope">
          <slot :name="prop" :row="scope.row">
            <div :style="style">
              <span v-if="formatter">{{ formatter(scope.row) }}</span>
              <span v-else>{{ scope.row[prop] }}</span>
            </div>
          </slot>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" :width="operation.width" v-if="operation.columns">
        <template #default="scope">
          <slot name="operations" :row="scope.row">
            <span v-for="item in operation.columns" :key="item.text || item.icon">
              <el-button v-if="setVisible(scope.row, item.visible)" :type="item.type" :link="item.link" :plain="item.plain" @click="item.click(scope.row)" size="small" style="margin-right: 4px">
                <el-icon v-if="item.icon" :class="item.icon"></el-icon>
                {{ item.text}}
              </el-button>
            </span>
          </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
/*
* 相关链接：
* https://blog.csdn.net/weixin_36757282/article/details/130523672
* */
const {columns, data, operation} = defineProps(['columns', 'data', 'operation'])
const setVisible = (row, visible) => {
  return !visible || visible(row)
}
</script>
<style lang="scss" scoped>
.table-wrapper {
  border-top: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
}
.inline-flex {
  display: inline-flex;
  align-items: center;
}
.p-14 {
  border-bottom: 1px solid #eaeaea;
  padding: 14px;
}
.p-y-20 {
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
}
</style>

<style lang="scss">
.table-tooltip {
  max-width: 220px;
}
</style>
